<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>avalon test</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
    <script src="../../dist/avalon.js"></script>
    <script>
        function getData() {
            var data = []
            for (var i = 0; i < 10; i++) {
                data.push({
                    a: new Date - 0,
                    b: new Date - 1,
                    c: new Date - 2,
                    d: new Date - 3
                })
            }
            return data
        }
        var vm = avalon.define({
            $id: "test",
            curPage: 1,
            totalPages: 20,
            totalItems: 193,
            pageItems: [1, 2, 3, 4, 5],
            gridData: getData(),
            pageSize: 10,
            changePage: function(p) {
                this.curPage = p;
                console.log('curPage:' + this.curPage);
                if (this.totalPages <= 5) {
                    this.pageItems = avalon.range(1, this.totalPages + 1);
                } else {
                    if (this.curPage < 4) {
                        this.pageItems = avalon.range(1, 6);
                    } else if (this.curPage > 3 && this.curPage < this.totalPages - 1) {
                        this.pageItems = avalon.range(this.curPage - 2, this.curPage + 3);
                    } else {
                        this.pageItems = avalon.range(this.totalPages - 4, this.totalPages + 1);
                    }
                }
                setTimeout(function() {

                    vm.gridData = getData()
                }, 300)

            }
        })
    </script>
</head>

<body>
    <div class="am-container" ms-controller="test">
        <div>
            <table border="1">
                <tr>
                    <td>行1</td>
                    <td>行2</td>
                    <td>行3</td>
                    <td>操作 </td>
                </tr>
                <tr ms-for="el in @gridData">
                    <td>{{el.a}}</td>
                    <td>{{el.b}}</td>
                    <td>{{el.c}}</td>
                    <td>{{el.d}}</td>
                </tr>
            </table>
        </div>
        <div class="am-u-md-4">
            <p class="am-margin am-text-sm">共 {{@totalItems}} 条记录</p>
        </div>
        <div class="am-u-md-8">
            <ul class="am-pagination am-pagination-right am-text-xs">
                <li><a href="javascript:;" ms-click="@changePage(1)">首页</a></li>
                <li ms-class="{'am-disabled' : @curPage == 1}"><a href="javascript:;" ms-click="@changePage(@curPage-1)"><span class="am-icon-angle-double-left"></span></a></li>
                <li ms-for="el in @pageItems" ms-class="{'am-active' : @curPage == el}" ms-click="@changePage(el)"><a href="javascript:;">{{el}}</a></li>
                <li ms-class="{'am-disabled' : @curPage == @totalPages}"><a href="javascript:;" ms-click="@changePage(@curPage+1)"><span class="am-icon-angle-double-right"></span></a></li>
                <li><a href="javascript:;" ms-click="@changePage(@totalPages)">尾页</a></li>
            </ul>
        </div>
    </div>
</body>

</html>